<!DOCTYPE html>
<html>
<head>
	<meta charset="utf8">
	<title>Zison音乐</title>
	<link href="{{ url_for('static',filename='css/pt_discover_index.css')}}" type="text/css" rel="stylesheet">
	<script src="{{ url_for('static',filename='js/jQuery-2.2.0.min.js')}}" type="text/javascript"></script>
	<script src="{{ url_for('static',filename='js/jsArr01.js')}}" type="text/javascript"></script>
	<script src="{{ url_for('static',filename='js/yinghua.js')}}" type="text/javascript"></script>>
	<style>
		.slideshow .nivoSlider .nivo-directionNav a {
		width: 40px;
		height: 76px;
		<!--background: url(../images/arrow-prev.png) no-repeat center center #030303;-->
		top: 50%;
		margin-top: -38px;
		opacity: 0.5;
		filter: alpha(opacity=50)
		}

		.slideshow .nivoSlider .nivo-directionNav a.nivo-nextNav {
		background-image: url(../images/arrow-next.png)
		}
		.slideshow .nivo-directionNav a:hover {
		background-color: #0885B1;
		opacity: 5;
		filter: alpha(opacity=100)
		}

		.nivo-controlNav {
		display: none
		}
		.nivoSlider {
		position: relative
		}

		.nivoSlider img {
		left: 0;
		position: absolute;
		top: 0
		}

		.nivoSlider a.nivo-imageLink {
		border: 0 none;
		display: none;
		height: 100%;
		left: 0;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 6
		}

		.nivo-slice {
		display: block;
		height: 100%;
		position: absolute;
		z-index: 5
		}

		.nivo-box {
		display: block;
		position: absolute;
		z-index: 5
		}

		.nivo-caption {
		background: none repeat scroll 0 0 #000;
		bottom: 0;
		color: #fff;
		left: 0;
		opacity: 0.8;
		position: absolute;
		width: 100%;
		z-index: 8
		}

		.nivo-caption p {
		margin: 0;
		padding: 5px
		}

		.nivo-caption a {
		display: inline !important
		}

		.nivo-html-caption {
		display: none
		}

		.nivo-directionNav a {
		cursor: pointer;
		position: absolute;
		top: 45%;
		z-index: 9
		}

		.nivo-prevNav {
		left: 0
		}

		.nivo-nextNav {
		right: 0
		}

		.nivo-controlNav a {
		cursor: pointer;
		position: relative;
		z-index: 9
		}

		.nivo-controlNav a.active {
		font-weight: bold
		}

		.slideshow .nivoSlider {

		margin-bottom: 20px;
		position: relative
		}


		.slideshow .nivoSlider img {
		display: none;
		left: 0;
		position: absolute;
		top: 0px
		display: block;
		width: 100%;
		left: 1px !important;
		top: 1px !important
		}
		.slideshow .nivoSlider a {
		border: 0 none;
		display: block
		}

		.slideshow .nivo-controlNav {
		bottom: 5px;
		height: 22px;
		position: absolute;
		right: 10px;
		text-align: center;
		z-index: 99
		}

		.slideshow .nivo-controlNav a {

		border: 0 none;
		display: block;
		float: left;
		height: 22px;
		margin-right: 3px;
		text-indent: -9999px;
		vertical-align: top;
		width: 22px
		}

		.slideshow .nivo-controlNav a.active {
		background-position: 0 -22px
		}

		.slideshow .nivo-directionNav a {
		border: 0 none;
		display: block;
		height: 30px;
		text-indent: -9999px;
		width: 30px
		}

		.slideshow a.nivo-nextNav {
		background-position: -30px 0;
		right: 15px
		}

		.slideshow a.nivo-prevNav {
		left: 15px
		}

		.slideshow .nivo-caption {
		font-family: Helvetica, Arial, sans-serif;
		text-shadow: none
		}

		.slideshow .nivo-caption a {
		color: #efe9d1;
		text-decoration: underline
		.slideshow > div {
		height: 345px !important;
		width: 850px
		}
	</style>
</head>
	<body id="auto-id-hmxzivBOqt0HedNm" style="background: url('../../static/image/bg.jpg') no-repeat">
		<div data-module="discover" data-sub="discover" id="g_top"
			class="m-top">
			&nbsp;
		</div>
		<div id="g_nav" class="m-subnav">
			&nbsp;
		</div>
		<div class="n-ban d-flag" id="index-banner"
			style="background-image: url(static/image/bg.jpg); background-repeat: no-repeat;">
			<div class="wrap">
				<div class="ban f-pr" style="z-index: 10;">
					<div id="slidershow" class="nivoSlider">
						<a href="#" class="nivo-imageLink" style="display: block;">
							<img src="{{url_for('static',filename='image/slider3.jpg')}}" class="img-responsive"
							style="display: none;">
						</a>
						<a href="#" class="nivo-imageLink" style="display: none;">
							<img src="{{url_for('static',filename='image/slider2.jpg')}}" class="img-responsive"
							style="display: none;">
						</a>
						<a href="#" class="nivo-imageLink" style="display: block;">
							<img src="{{url_for('static',filename='image/slider1.jpg')}}" class="img-responsive"
							style="display: none;">
						</a>
					</div>
				</div>
				<div class="download f-pr">
					<span class="shadow"></span><span class="shadowr"></span>
				</div>
			</div>
			<div id="discover-module" class="g-bd1 f-cb">
				<div class="g-mn1">
					<div class="g-mn1c">
						<div class="g-wrap3">
							<div class="n-rcmd">
								<div class="v-hd2">
									<a href="#" class="tit f-ff2 f-tdn">热门歌手</a>
									<span class="more"><a href="{{url_for('home.artistList')}}"
										class="s-fc3">更多</a><i class="cor s-bg s-bg-6">&nbsp;</i> </span>
								</div>
								<ul class="m-cvrlst f-cb">
									{% for artist in hot_artist %}
									<li>
										<div class="u-cover u-cover-1">
											<a href="{{url_for('home.artist',id=artist.id)}}">
												<img src="{{url_for('static',filename='images/artist/'+artist.imgURL)}}">
											</a>
										</div>
									</li>
									{% endfor %}
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="g-sd1">
					<div class="n-dj n-dj-1">
						<h1 class="v-hd3">
							热门歌曲
						</h1>
						<ul class="n-hotdj f-cb" id="hotdj-list">
							{% for song in hot_song %}
							<li>
								<div class="info">
									<p>
										<a onclick='playA("{{song.songName}}","{{song.id}}");'
											style="color: #1096A9">{{song.songName}} </a>
										<sup class="u-icn u-icn-1"></sup>
									</p>
									<p class="f-thide s-fc3">
										歌手：{{song.singer}}
									</p>
								</div>
							</li>
							{% endfor %}
						</ul>
					</div>
				</div>
			</div>
<script>
//实现调用幻灯片插件轮播广告
jQuery(document).ready(function() {
	jQuery('#slidershow').nivoSlider();
});

function playA(name, id) {
	window.parent.playMusic(name,id);
}
</script>
</div>
</body>
</html>
